<template>
  <v-form>
    <v-container class="contain">
      <div class="view mt-10">
        <h2>{{ $t('orderdetail') }}</h2>

        <v-row align="center" class="mt-10">
          <v-col cols="12" sm="6">
            <v-text-field v-model="detail.ordersn" :label="$t('orderno')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-img :src="detail.brand?.brand_logo" width="100" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field
              :value="detail.carmodelshow?.model_num"
              :label="$t('modelnum')"
              disabled
            />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.goods?.car_no" :label="$t('carno')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.goods?.name" :label="$t('name')" disabled />
          </v-col>

          <v-col
            cols="12"
            sm="6"
            class="store-field"
            @click="$router.push(localePath(`/shopdetail/${detail.store?.id}`))"
          >
            <v-text-field :value="detail.store?.name" :label="$t('store')" readonly />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field
              :value="getStatus(detail.pay_status)"
              :label="$t('paymentstatus')"
              disabled
            />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field v-model="detail.totalamount" :label="$t('totalmoney')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field v-model="detail.leasetimenum" :label="$t('renthour') + '(H)'" disabled />
          </v-col>

          <!-- <v-col
							cols="12"
							sm="6"
					>
						<v-text-field
								:value="detail.totaldeposit"

								:label="$t('deposit')"
								disabled
						></v-text-field>
					</v-col> -->

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.cdw_fee" :label="$t('cdws')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.device_fee" :label="$t('etcrent')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.rent_fee_total" :label="$t('total')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.discount_fee" :label="$t('totalcount')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.totalfee" :label="$t('needpaymoney')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.payfee" :label="$t('truepay')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.starttime_text" :label="$t('begintime')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.endtime_text" :label="$t('endtime')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.paytime_text" :label="$t('paytime')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.pickup_time_text" :label="$t('getcartime')" disabled />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field
              :value="detail.success_time_text"
              :label="$t('orderfinishedtime')"
              disabled
            />
          </v-col>

          <v-col cols="12" sm="6">
            <v-text-field :value="detail.createtime_text" :label="$t('createordertime')" disabled />
          </v-col>
          <template v-if="detail.pay_status == '12'">
            <v-col cols="12" sm="6">
              <v-text-field :value="detail.refund_fee" :label="$t('refund_fee')" disabled />
            </v-col>

            <v-col cols="12" sm="6">
              <v-text-field
                :value="detail.refund_processing_fee"
                :label="$t('refund_processing_fee')"
                disabled
              />
            </v-col>
          </template>
        </v-row>
        <template v-if="false">
          <h4>{{ $t('devicedetail') }}</h4>

          <v-row>
            <v-col v-for="item in detail.device" :key="item.name" cols="12" sm="6">
              <v-text-field
                :value="item.fee"
                :label="`${item.name} ${
                  item.unit_name_cn
                    ? `x${item.number}${item[`unit_name_${formartLang($i18n.locale)}`]}`
                    : ''
                } ${item.price_type === 'day' ? `x${item.days}${$t('day')}` : ''}`"
                disabled
              />
            </v-col>
          </v-row>
          <v-row>
            <v-col v-for="item in detail.orderdiscount" :key="item.discount_code" :cols="12" sm="6">
              <v-card class="mx-auto" outlined>
                <v-list-item three-line>
                  <v-list-item-content>
                    <v-list-item-title class="text-h5 mb-1">
                      {{ $t('decode') }}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      {{ $t('decodetitle1') }} : {{ item.discount_code }}</v-list-item-subtitle
                    >
                    <v-list-item-subtitle>
                      {{ $t('decodetitle2') }} : {{ item.discount_ratio }}</v-list-item-subtitle
                    >
                    <v-list-item-subtitle>
                      {{ $t('decodetitle3') }} : {{ item.discount_fee }}</v-list-item-subtitle
                    >
                    <v-list-item-subtitle>
                      {{ $t('decodetitle4') }} : {{ item.parent_code }}</v-list-item-subtitle
                    >
                  </v-list-item-content>
                </v-list-item>
              </v-card>
            </v-col>
          </v-row>

          <v-row no-gutters class="spec mt-10 mb-6">
            {{ $t('spec') }}
          </v-row>
          <v-row class="mt-10 mb-6">
            <v-col
              :cols="3"
              data-desc='"displacement": "3799 cc",//排量
        "max_output": "570PS /6,800rpm",//最大排量
        "max_torque": "55.0kg・m(637N・m)/3300～5800rpm",//最大扭矩
        "color": "黑色",//颜色
        "interior_color": "标准",//饰颜色
        "transmission": "5速自动变速箱",//变速箱
        "handle": "left",//驾驶位
        "car_no": "皖R52014",//车牌号'
            >
              <v-icon color="#09d299" :size="16">{{ icons.mdiCheck }}</v-icon>
              <span class="spec-txt">
                {{ detail.goods?.displacement }}
              </span>
            </v-col>
            <v-col :cols="4">
              <v-icon color="#09d299" :size="16">{{ icons.mdiCheck }}</v-icon>
              <span class="spec-txt">
                {{ detail.goods?.max_output }}
              </span>
            </v-col>
            <v-col :cols="5">
              <v-icon color="#09d299" :size="16">{{ icons.mdiCheck }}</v-icon>
              <span class="spec-txt">
                {{ detail.goods?.max_torque }}
              </span>
            </v-col>
            <v-col :cols="3">
              <v-icon color="#09d299" :size="16">{{ icons.mdiCheck }}</v-icon>
              <span class="spec-txt">
                {{ detail.goods?.color }}
              </span>
            </v-col>
            <v-col :cols="4">
              <v-icon color="#09d299" :size="16">{{ icons.mdiCheck }}</v-icon>
              <span class="spec-txt">
                {{ detail.goods?.interior_color }}
              </span>
            </v-col>
            <v-col :cols="5">
              <v-icon color="#09d299" :size="16">{{ icons.mdiCheck }}</v-icon>
              <span class="spec-txt">
                {{ detail.goods?.transmission }}
              </span>
            </v-col>
            <v-col :cols="3">
              <v-icon color="#09d299" :size="16">{{ icons.mdiCheck }}</v-icon>
              <span class="spec-txt">
                {{ detail.goods?.handle }}
              </span>
            </v-col>
            <v-col :cols="4">
              <v-icon color="#09d299" :size="16">{{ icons.mdiCheck }}</v-icon>
              <span class="spec-txt">
                {{ detail.goods?.car_no }}
              </span>
            </v-col>
          </v-row>
        </template>
        <h4>{{ $t('margindetails') }}</h4>
        <v-row>
          <v-col v-for="item in detail.depositData" :key="item.value" cols="6" sm="6">
            <v-text-field :value="item.value" :label="item.name" disabled />
          </v-col>
        </v-row>
        <v-row no-gutters align="center" justify="center">
          <v-btn
            class="mt-10"
            elevation="2"
            rounded
            dark
            x-large
            color="#E22129FF"
            style="text-transform: none"
            @click="$router.push(localePath('/'))"
          >
            {{ $t('backhome') }}
          </v-btn>
          <v-btn
            v-if="detail.status === 0 && (detail.pay_status === 0 || detail.pay_status === 3)"
            class="mt-10 ml-2"
            elevation="2"
            rounded
            dark
            x-large
            color="#E22129FF"
            style="text-transform: none"
            @click="gotopay"
          >
            {{ $t('gopay') }}
          </v-btn>
          <!-- <v-btn
            v-if="detail.deposit_status === 0 || detail.deposit_status === 3"
            class="mt-10 ml-2"
            elevation="2"
            rounded
            dark
            x-large
            color="#E22129FF"
            style="text-transform: none"
            @click="gotopaybond"
          >
            {{ $t("paybond") }}
          </v-btn> -->
          <v-dialog v-model="dialog" width="80%">
            <template #activator="{ attrs }">
              <v-btn
                v-show="detail.status === 0"
                dark
                v-bind="attrs"
                class="mt-10 ml-2"
                elevation="2"
                rounded
                x-large
                color="#E22129FF"
                style="text-transform: none"
                @click="showDialog"
              >
                {{ $t('cancelOrder') }}
              </v-btn>
              <v-btn
                v-show="detail.status === 1"
                v-bind="attrs"
                class="mt-10 ml-2"
                elevation="2"
                rounded
                dark
                x-large
                color="#E22129FF"
                style="text-transform: none"
                @click="showDialog"
              >
                {{ $t('refund') }}
              </v-btn>
            </template>

            <v-card>
              <v-card-title class="text-h5">
                {{ $t('titlea') }}
              </v-card-title>
              <v-card-text>
                <v-col cols="12" sm="6">
                  <v-text-field :value="dialogDT.totalfee" :label="$t('totalfee')" disabled />
                </v-col>
                <v-col cols="12" sm="6">
                  <v-text-field :value="dialogDT.payfee" :label="$t('payfee')" disabled />
                </v-col>
                <v-col cols="12" sm="6">
                  <v-text-field
                    :value="dialogDT.processing_fee_ratio"
                    :label="$t('processing_fee_ratio')"
                    disabled
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <v-text-field
                    :value="dialogDT.processing_fee"
                    :label="$t('processing_fee')"
                    disabled
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <v-text-field :value="dialogDT.refund_fee" :label="$t('refund_fee')" disabled />
                </v-col>
              </v-card-text>

              <v-divider />

              <v-card-actions>
                <v-spacer />
                <v-btn color="primary" text @click="cancelOrder">
                  {{ $t('confirm') }}
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-row>
      </div>
    </v-container>
  </v-form>
</template>

<script>
import { mdiCheck } from '@mdi/js';
import { formartLang } from '~/utils';

export default {
  name: 'OrderDetail',

  data() {
    return {
      icons: {
        mdiCheck
      },
      loading: false,
      dialog: false,
      valid: false,
      snackbar: false,
      ordersn: this.$route.query.ordersn,
      detail: {},
      dialogDT: {
        totalfee: '', // 需付金额
        payfee: '', // 实付金额
        processing_fee_ratio: '', // 手续费比例  %
        processing_fee: '', // 手续费
        refund_fee: '' // 退款金额
      }
    };
  },
  mounted() {
    this.getInfo();
    window.gtag?.('event', 'conversion', {
      send_to: 'AW-11498410870/N6gVCK7g1vcZEPam7-oq'
    });
  },
  methods: {
    formartLang,
    getInfo() {
      this.$api
        .post('/order/getOrderInfo', { ordersn: this.ordersn }, { getAll: true })
        .then((res) => {
          console.log(res.data);
          this.detail = res.data;
          this.detail.depositData = [
            { value: res.data.deposit_fee, name: this.$t('bond') },
            { value: res.data?.deposit_fee_paid, name: this.$t('paybond') },
            {
              value: res.data?.deposit_fee_refund,
              name: this.$t('refundofdeposit')
            },
            {
              value: res.data?.deposit_fee_deduct,
              name: this.$t('deductingdeposit')
            },
            {
              value: res.data?.deposit_pay_time_text,
              name: this.$t('depositpaymenttime')
            },
            {
              value: res.data?.deposit_refund_time_text,
              name: this.$t('depositrefundtime')
            },
            {
              value:
                res.data?.deposit_status === 1
                  ? this.$t('paymentsuccessful')
                  : res.data?.deposit_status === 2
                  ? this.$t('refundsuccessful')
                  : res.data?.deposit_status === 3
                  ? this.$t('paymentfailed')
                  : this.$t('unpaid'),
              name: this.$t('bondstatus')
            }
          ];
        });
    },
    getStatus(val) {
      // 0未支付 1支付中 2支付成功 3支付失败 11退款中 12退款成功
      if (String(val) === '0') {
        return this.$t('unpaid');
      }
      if (String(val) === '1') {
        return this.$t('paymentinprogress');
      }
      if (String(val) === '2') {
        return this.$t('paymentsuccessful');
      }
      if (String(val) === '3') {
        return this.$t('paymentfailed');
      }
      if (String(val) === '11') {
        return this.$t('refundinprogress');
      }
      if (String(val) === '12') {
        return this.$t('refundsuccessful');
      }
    },
    gotopay() {
      this.$router.push(
        this.localePath({
          path: '/payment',
          query: { ordersn: this.$route.query.ordersn }
        })
      );
    },
    gotopaybond() {
      // paybond
      this.$router.push(
        this.localePath({
          path: '/paybond',
          query: { ordersn: this.$route.query.ordersn }
        })
      );
    },
    showDialog() {
      this.$api
        .post('/order/getRefundProcessingFee', { ordersn: this.ordersn }, { getAll: true })
        .then((res) => {
          console.log(res.data);
          this.dialogDT = res.data;
          this.dialog = true;
        });
    },
    cancelOrder() {
      if (!this.loading) {
        this.loading = true;
        this.$api
          .post('/order/cancelOrder', { ordersn: this.ordersn }, { getAll: true })
          .then((res) => {
            console.log(res.data);
            setTimeout(() => {
              this.dialog = false;
              this.loading = false;
              location.reload();
            }, 1000);
          });
      }
    }
  }
};
</script>

<style scoped lang="scss">
@media screen and (max-width: 600px) {
  .contain {
    .view {
      width: 90vw !important;
    }
  }
}
.contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  .view {
    width: 52vw;
    max-width: 1000px;
  }
}
.store-field {
  cursor: pointer;
  ::v-deep label {
    cursor: pointer !important;
  }
  ::v-deep input {
    cursor: pointer !important;
    color: rgba(0, 0, 0, 0.38) !important;
  }
}
</style>
